<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .app{
            background-color: cornsilk;
            padding: 10px;
        }
        .son{
            background-color:cyan;
            padding: 10px;
        }
        .grandson{
            background-color:deepskyblue;
            padding: 10px;
        }
    </style>
</head>
<body>
    <div id="app"></div>
</body>
<script src="https://unpkg.com/vue@next"></script>
<script>
    const {reactive,inject,provide} = Vue;
    /** 孙子组件 */
    const GrandSon = {
        template: `
            <div class="grandson">
                <h3>我是 GrandSon （孙子） 组件</h3>
               <p>{{hourse.name}}---{{hourse.price}}</p>
            </div>
        `,
        setup(props) {
            let hourse=inject('hourse1')
            return{hourse}
        }
    }

    /** 儿子组件 */
    const Son = {
        components: { GrandSon },
        template: `
            <div class="son">
                <h3>我是 Son （儿子） 组件</h3>
                <p>{{hourse.name}}--{{hourse.price}}</p>
                <grand-son />
            </div>
        `,
        setup(props) {
            let hourse=inject('hourse1')
            return{hourse}
        }
    }

    /** 祖组件 */
    const app = Vue.createApp({
        components: { Son },
        template: `
            <div class="app">
                <h3>我是 App （祖） 组件</h3>
                <p> {{hourse.name}} -- {{hourse.price}} </p>
                <son />
            </div>
        `,
        setup(props) {
            let hourse = reactive({name: '野摩托', price: '25w'})
            provide("hourse1",hourse)
            return { hourse }
        }
    })

    app.mount("#app")
</script>
</html>